<template>
  <div class="index-container">
    <div class="shop-top">
      <div class="w1200">
        <div class="fr" ><router-link :to="`/shoplist`" title="融易装">
              <i class="el-icon-house" style="margin-right:5px;"></i>首页
            </router-link></div>
        <div class="fl">
           <div class="sn-quick-menu">
              <div class="login"><img v-if="info.logo" :src="info.logo.path" alt="">{{info.name?info.name:'暂未设置'}}<i class="el-icon-arrow-down el-icon--right"></i></div>
              <div class="sp-cart">客服服务<i class="el-icon-arrow-down"></i></div>
            </div>
        </div>
      </div>
    </div>

     <div class="header">
      <div class="headerLayout w1200">
        <div class="headerCon">
          <h1 class="mallLogo">
            <router-link :to="`/shoplist`" title="融易装">
              <img src="../img/logo.png">
            </router-link>
          </h1>
          <div class="mallSearch">
            <form action="" class="layui-form" novalidate>
              <input type="text" v-model="keyword"  class="layui-input" placeholder="搜索关键字">
              <button class="layui-btn" @click="filterPops()">
                  <i class="el-icon-search"></i>
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="content content-nav-base commodity-content">
      <div class="main-nav">
        <div class="inner-cont0">
          <div class="inner-cont1 w1200">
            <div class="category-types" style="">
              <h3>全部分类</h3>
            </div>
            <div class="inner-cont2">
              <router-link :to="`/nowlist`">选材中心</router-link>
              <router-link :to="`/nowlist`">我的订单</router-link>
              <router-link :to="`/nowadderss`">地址管理</router-link>
              <router-link :to="`/nowcart`">购物车</router-link>
            </div>
          </div>
        </div>
      </div>


      <div class="commod-cont-wrap">
        <div class="product-list-box" id="product-list-box">
          <div class="product-list-cont w1200">
             <div class="attr_filter">
              <h2>店铺筛选</h2>
              <ul>
                <li>
                <dl>
                  <dt>按分类筛选：</dt>
                  <dd>
                   <a v-for="(item,index) in classifyList" :key="index" :class="{'active': classifyIndex == item.cate_id}" @click="toggleNav(item)">{{item.cate_name}}</a>
                  </dd>
                </dl>
                </li>
                <li>
                <dl>
                  <dt>按品牌筛选：</dt>
                  <dd class="cate">
                    <a v-for="(item,index) in classcont.child" :key="index" :class="{active:store_id_lst.includes(item.cate_id)}" @click="barndkstchose(item.cate_id)">{{item.cate_name}}</a>
                  </dd>
                </dl>
                </li>
                <li>
                <dl>
                  <dt style="line-height:40px;">按综合筛选：</dt>
                  <dd class="bottomcate">
                    <span @click="ordersale('1')" :class="'1' == is_order_sale ? 'active':''">销量<i class="el-icon-sort"></i></span>
                    <span @click="ordersale('3')" :class="'3' == is_order_sale ? 'active':''">综合<i class="el-icon-sort"></i></span>
                    <span><input style="width:160px;" type="text" placeholder="搜索关键字" placeholder-class="placeholder" v-model="keyword" /><i class="catevb" @click="filterPops()">确定</i></span>
                  </dd>
                </dl>
                </li>
              </ul>
            </div>
            <div class="product-item-box layui-clear">
              <div class="i_bList">
              <div class="i_bItem" v-for="item in List" :key="item.store_id"  @click="toPage(item.store_id)">
                <div class="i_topimg"
                  :style="{
                  background: 'url(https://cos.ryz1620.com/liankun/static/newHome/home2.png)','background-repeat': 'no-repeat','background-size': '100% 100%',}">

                </div>
                <div class="i_logo">
                  <img :src="item.store_logo"></img>
                </div>
                <div class="i_bottom" style="height: 90rpx;">
                  <div class="i_title">{{item.store_name}}</div>
                  <div class="i_des">
                    <span>{{item.store_detail}}</span>
                  </div>
                </div>
              </div>
            </div>
            </div>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[20, 40, 60, 80]"
            :page-size="pagesize"
            layout="sizes, prev, pager, next"
            :total="total">
          </el-pagination>
          </div>
        </div>
      </div>
      
    </div>

  
  <div class="footer">
    <div class="ng-promise-box">
      <div class="ng-promise w1200">
        <p class="text">
          <a class="icon1" href="javascript:;">7天无理由退换货</a>
          <a class="icon2" href="javascript:;">送货上门</a>
          <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
        </p>
      </div>
    </div>
    <div class="mod_help w1200">                                     
      <!-- <p>
        <a href="javascript:;">关于我们</a>
        <span>|</span>
        <a href="javascript:;">帮助中心</a>
        <span>|</span>
        <a href="javascript:;">售后服务</a>
        <span>|</span>
        <a href="javascript:;">行业资讯</a>
        <span>|</span>
        <a href="javascript:;">关于货源</a>
      </p> -->
      <p class="coty">融易装版权所有 &copy; 2012-2020</p>
    </div>
  </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '小刀',
        info: {},
        mobile: '',
        // 精选品牌
        brandList: [],
        List:[],
        currentPage: 1,
        pagesize:20,
        total:1,
        parentList:[],
        classifyIndex: '',
        classifyList: [],
        classcont:'',
        store_id_lst:[],//选中的品牌
        order_type:'',//销量排序：sale 综合排序：mix
        sale_type:1,
        minPrice:'',
        maxPrice:'',
        is_order_sale:2,
        storeList:[],
        keyword:'',
      }
    },
     mounted() {
            this.info = JSON.parse(localStorage.getItem('info'))
            this.mobile = localStorage.getItem('mobile')
            this.getDataparent()
        },
    methods: {
       handleSizeChange(val) {
        this.pagesize = val
        this.currentPage = 1
        this.getDatalist()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getDatalist()
      },
      toPage(id){
        this.$router.push({name:'shop',query:{id:id}})
      },
      //商品销量
      ordertype(type){
        this.currentPage = 1
        if(this.order_type == type){
          this.order_type = ''
          this.getDatalist()
        }else{
          this.order_type = type
          this.getDatalist()
        }
      },
      //店铺销量
		ordersale(e){
			console.log(e)
			if(this.is_order_sale == e){
				this.is_order_sale = 2
				this.getDatalist()
			}else{
				this.is_order_sale = e
				this.getDatalist()
			}
		},
      filterPops(){
        this.currentPage = 1
        this.getDatalist()
		},
       // 分类
      getDataparent() {
        this.$http.post('/api/admin/shopweb/cate/more',{}).then(res=>{
					if(res.code==1){  
            let cateList = res.data.cateLst   // 分类数据（一级二级分类）
						let hotList = res.data.hotCate    // 热门分类（二级分类，分类名称：热门）
						let nList = []
						this.classifyIndex = cateList[0].cate_id
						this.classcont = cateList[0]
            this.classifyList = cateList
            this.getDatalist()
					}
				})
      },
      // 切换nav栏
      toggleNav(items) {
        if (this.classifyIndex != items.cate_id) {
          this.classifyIndex = items.cate_id
          this.classcont = items
        }
        this.currentPage = 1
        this.getDatalist()
      },
      barndkstchose(id){
        if(this.store_id_lst.includes(id)){
          this.store_id_lst=this.store_id_lst.filter(function (ele){return ele != id;});
        }else{
          this.store_id_lst.push(id);
        }
        this.currentPage = 1
        this.getDatalist()
	   	},
      // 商品
      getDatalist() {
        this.$http.post('/api/admin/shopweb/store/storeLst',{
        page:this.currentPage,
        pagesize:this.pagesize,
        cate_id:this.store_id_lst.join(),
        pcate_id:this.classifyIndex,
        order_type:this.is_order_sale,
        keyword:this.keyword,
        }).then(res=>{
					if(res.code==1){
             let List = res.data 
             this.total =  List.count
              this.List = List.data
					}
				})
      },
    }
  }
</script>
<style lang="less" scoped>
  & /deep/ .content{
    padding: 0 !important;
  }
  @import '../css/index.less';
</style>
